<template>
    <li @mouseenter="mouseHandler(true)" @mouseleave="mouseHandler(false)"
        :style="{backgroundColor: bgColor,color: myColor}">
        <label>
            <input type="checkbox" v-model="isComplete"/>
            <span>{{ todo.title }}</span>
        </label>
        <button class="btn btn-danger" v-if="isShow" @click="delData">删除</button>
    </li>
</template>

<script lang="ts" setup name="Item">
import {type Todo} from "@/Types/Todo";
import {computed, ref} from "vue";

let props = defineProps({
    todo: {
        type: Object as () => Todo,
        required: true
    },
    delTodo: {
        type: Function,
        required: true
    },
    updateTodo: {
        type: Function,
        required: true
    }
})
const isComplete = computed({
    get() {
        return props.todo?.isCompleted
    },
    set(val) {
        props.updateTodo(props.todo,val)
    }
})
let isShow = ref(false)
let bgColor = ref('white')
let myColor = ref('black')

function mouseHandler(flag: boolean) {
    if (flag) {
        isShow.value = true
        bgColor.value = 'pink'
        myColor.value = 'green'
    } else {
        isShow.value = false
        bgColor.value = 'white'
        myColor.value = 'black'
    }
}

function delData() {
    if(window.confirm("确定要删除吗？")) {
        props.delTodo(props.todo?.id)
    }
}
</script>

<style scoped>
/*item*/
li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
}

li label {
    float: left;
    cursor: pointer;
}

li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
}

li button {
    float: right;
    /*display: none;*/
    margin-top: 3px;
}

li:before {
    content: initial;
}

li:last-child {
    border-bottom: none;
}

</style>
